<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/base_body_header.jsp" %>
<%@include file="../common/navbar.jsp" %>
<%@include file="../common/page_content_pre.jsp" %>

<div class="page-content">
    <div class="row">
        <shiro:hasPermission name="inspectNote:edit">
            <div class="col-sm-12">
                <button class="btn btn-xs btn-success" type="button"
                        data-toggle="modal" data-target="#exampleModal"
                        data-whatever="@mdo">添加
                    <i class="icon-plus align-top bigger-125 icon-on-right"></i>
                </button>
            </div>
        </shiro:hasPermission>
        <div class="col-xs-12">
            <div class="table-responsive">
                <table id="list-table" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr>
                        <th class="hidden-480">编号</th>
                        <th class="hidden-480">日期</th>
                        <th class="hidden-480">带看人</th>
                        <th class="hidden-480">客户</th>
                        <th class="hidden-480">带看信息</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <input id = "relationId" type="hidden" value="${houseInspectNote.relationId}">
        <input id = "relationType" type="hidden" value="${houseInspectNote.relationType}">
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">带看</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon">客户姓名:</span>
                        <select id="customerId" class="col-sm-4">
                            <c:forEach items="${customers}" var="item" varStatus="vs">
                                <option value="${item.customerId}"
                                    <c:if test="${item.customerId == houseInspectNote.customerId}">selected</c:if>>
                                    ${item.customerName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    &nbsp;
                    <div class="input-group">
                        <span class="input-group-addon">带看时间:</span>
                        <input name="inspectNoteDate" id="inspectNoteDateId" readonly="true" style="width: 33%"
                               class="form-control required" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
                    </div>
                    &nbsp;
                    <div class="input-group">
                        <span class="input-group-addon">带看信息:</span>
                        <textarea type="text" class="form-control col-sm-9" cols="3" id="inspectNoteInfo" style="height: 150px;"></textarea>
                    </div>
                    <span style="float: right; color: red;" id="infoId"></span>
                    <div>&nbsp;</div>
                </div>
                <div class="modal-footer" style="">
                    <button type="button" class="btn btn-sm btn-primary subUpdate" data-dismiss=""
                            onclick="addFollow(this)">确认</button>
                    <button type="button" class="btn btn-sm btn-info" data-dismiss="modal" onclick="closeValue()">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.page-content -->

<%@include file="../common/page_content_suf.jsp" %>
<%@include file="../common/script.jsp" %>

<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/my97/WdatePicker.js"></script>

<script type="text/javascript">
    var inspectNoteListTable;
    jQuery(function ($) {
        loadList();
    });

    function loadList(){
        inspectNoteListTable = $('#list-table').dataTable({
            "sAjaxSource": "${GLOBAL.basePath}/inspectNote/asynList",
            "fnServerData": function (sSource, aDataSet, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aDataSet,
                    "success": fnCallback,
                    "beforeSend":function (XMLHttpRequest) {
                        layer.load();
                    },
                    "complete":function (XMLHttpRequest, textStatus) {
                        layer.closeAll('loading');
                    }
                });
            },
            "fnServerParams": function (aoData) {//向服务器传额外的参数
                <c:if test="${not empty aoData}">
                aoData.push(${aoData});
                </c:if>
            },
            "bSort": false,
            "bFilter": false,
            "bServerSide": true,
            "bProcessing": false,
            "bLengthChange": false,
            "bSearching": false,
            "sProcessing": "${GLOBAL.staticImagePath}/loading.gif' />",
            "oLanguage": {
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条",
                "sInfoEmpty": "No data"
            },
            "aoColumns": [
                {"mDataProp": "inspectId"},
                {"mDataProp": "updateDate", "sWidth": "230px"},
                {"mDataProp": "userName"},
                {"mDataProp": "customerName"},
                {"mDataProp": "text"}
            ]
        });
    }

    function addFollow(obj){
        var inspectNoteInfo = $("#inspectNoteInfo").val();
        var inspectNoteDate = $("#inspectNoteDateId").val();
        $("#infoId").html("");
        if(inspectNoteInfo != null && inspectNoteInfo != "" && inspectNoteDate != null && inspectNoteDate != ""){
            $.ajax({
                url : "${GLOBAL.basePath}/inspectNote/save",
                type : "post",
                async : false,
                data : {
                    relationId : $("#relationId").val(),
                    inspectNoteInfo : $("#inspectNoteInfo").val(),
                    customerId : $("#customerId").val(),
                    relationType : $("#relationType").val(),
                    inspectNoteDate : $("#inspectNoteDateId").val()
                },
                success : function(data){
                    if(data){
                        obj.setAttribute('data-dismiss', 'modal');
                        window.location = "${GLOBAL.basePath}/inspectNote/list?relationId="+$("#relationId").val()+"&relationType="+$("#relationType").val();
                    }
                }

            })
        }else {
            $("#infoId").html("带看时间和带看信息不能为空!")
        }
    }

    function closeValue(){
        $("#inspectNoteInfo").val("");
        $("#infoId").html("")
    }
</script>
